<template>
  <div class="skc-heand-menus">
    <div v-if="isLoginRef && !props.isHidenCreat">
      <el-button type="success" @click="gotoPage('/knowCreat')" style="margin-right: 20px;" icon="Plus" round>
        创建知识
      </el-button>
    </div>
    <div>
      <el-dropdown v-if="isLoginRef">
        <img style="height: 32px;width: 32px;cursor: pointer; " src="/images/photo/photo.png" />
        <template #dropdown>
          <div style="width: 160px;padding: 20px;">
            <el-container>
              <el-aside width="64px">
                <img style="height: 48px;width: 48px;" src="\images\photo\photo.png" />
              </el-aside>
              <el-main>
                <div style="font-weight: 600;font-size: 14px; padding-right: 10px;color: #25396f;">{{ cuser.name }}
                </div>
              </el-main>
            </el-container>
            <el-dropdown-menu>
              <el-dropdown-item divided @click="reSetPassword()"><el-icon>
                  <Unlock />
                </el-icon>修改密码</el-dropdown-item>
              <el-dropdown-item v-if="cuser.frameMenuNum && cuser.frameMenuNum > 0"
                @click="gotoPage('/system/home')"><el-icon>
                  <Setting />
                </el-icon>管理控制台</el-dropdown-item>
              <el-dropdown-item divided @click="logout()"><el-icon>
                  <SwitchButton />
                </el-icon>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </div>
        </template>
      </el-dropdown>
      <el-button v-if="!isLoginRef" type="success" @click="gotoPage('/login')"
        style="margin-right: 20px; margin-left: 20px;" icon="UserFilled" round>
        登录
      </el-button>
    </div>
  </div>
  <user_logout ref="logoutRef"></user_logout>
  <User_from_password update-url="api/current/reset.password" ref="rePasswordForm"></User_from_password>
</template>
<script setup lang="ts">
import user_logout from '@/components/user/user_logout.vue';
import User_from_password from '@/views/system/localuser/components/user_form_password.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useUserInfoStore } from '@/store/useUserInfoStore';
import { onMounted, ref } from 'vue';
import type { User } from '@/types/system/user';
import { reactive } from 'vue';
const props = defineProps({
  isHidenCreat: {
    type: Boolean,
    required: false,
  }
});

const userInfo = useUserInfoStore();
const logoutRef = ref();
const isLoginRef = ref(true);

const rePasswordForm = ref();
const cuser: User = reactive({});
const gotoPage = (path: string) => {
  router.push(path);
}

const logout = () => {
  logoutRef.value.goToLogin();
}
/**
 * 修改密码
 */
const reSetPassword = () => {
  rePasswordForm.value.openWin([userInfo.$state.user.loginname]);
}

onMounted(() => {
  userInfo.getUser().then((user: User) => {
    if (user.loginname) {
      Object.assign(cuser, user)
      isLoginRef.value = true;
    } else {
      isLoginRef.value = false;
    }
  });
});


</script>
<style scoped>
/* 样式可以根据需要添加 */
.skc-heand-menus {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 垂直居中对齐 */
  text-align: right;
  padding-right: 20px;
  border-radius: 0px 0px 0px 32px;
  height: 50px;
  float: right;
}

.skc-heand-menus img {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* 标准语法 */
}

.skc-heand-menus img {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  outline: none;
  /* 标准语法 */
}

.skc-heand-menus img:hover {
  filter: brightness(90%);
  /* 提高亮度 */
}
</style>
